<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .slider {
        width: 560px;
        height: 400px;
        overflow: hidden;
      }

      .slider-wrapper {
        width: 100%;
        height: 320px;
      }

      .slider-wrapper img {
        display: block;
        width: 100%;
        height: 100%;
      }

      .slider-footer {
        position: relative;
        height: 80px;
        padding: 12px 12px 0 12px;
        background-color: rgb(37, 41, 60);
      }

      .slider-footer .toggle {
        display: flex;
        position: absolute;
        right: 0;
        top: 12px;
      }

      .slider-footer .toggle button {
        width: 28px;
        height: 28px;
        margin-right: 12px;
        appearance: none;
        border: none;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
      }

      .slider-footer .toggle button:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      .slider-footer p {
        margin: 0;
        margin-bottom: 10px;
        color: #fff;
        font-size: 18px;
      }

      .slider-indicator {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        align-items: center;
      }

      .slider-indicator li {
        width: 8px;
        height: 8px;
        margin: 4px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.4;
        cursor: pointer;
      }

      .slider-indicator li.active {
        width: 12px;
        height: 12px;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <div class="slider-wrapper">
        <img src="./images/slider01.jpg" alt="" />
      </div>
      <div class="slider-footer">
        <p>奔涌吧，后浪！</p>
        <ul class="slider-indicator">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="toggle">
          <button class="prev">&lt;</button>
          <button class="next">&gt;</button>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  // 初始数据
  const sliderData = [
    {
      url: "./images/slider01.jpg",
      title: "奔涌吧，后浪！",
      color: "rgb(37, 41, 60)",
    },
    {
      url: "./images/slider02.jpg",
      title: "开启剑与雪的黑暗传说！",
      color: "rgb(43, 35, 26)",
    },
    {
      url: "./images/slider03.jpg",
      title: "八年的怀旧游戏",
      color: "rgb(47, 23, 100)",
    },
    {
      url: "./images/slider04.jpg",
      title: "真正的jo厨出现了！",
      color: "rgb(36, 31, 33)",
    },
    {
      url: "./images/slider05.jpg",
      title: "让世界通过B站看到东方大国文化",
      color: "rgb(58, 91, 216)",
    },
    {
      url: "./images/slider06.jpg",
      title: "快来分享你的寒假日常吧~",
      color: "rgb(67, 90, 92)",
    },
    {
      url: "./images/slider07.jpg",
      title: "哔哩哔哩小年YEAH",
      color: "rgb(166, 131, 143)",
    },
    {
      url: "./images/slider08.jpg",
      title: "一站式解决你的电脑配置问题！！！",
      color: "rgb(53, 29, 25)",
    },
  ];

  // 获取元素
  const img = document.querySelector("img");
  const title = document.querySelector(".slider-footer p");
  const footer = document.querySelector(".slider-footer");
  const lis = document.querySelectorAll(".slider-indicator li");
  const prev = document.querySelector(".prev");
  const next = document.querySelector(".next");
  // 整个div
  const slider = document.querySelector(".slider");
  //   封装
  function setInfo() {
    // 设置背景图
    img.src = sliderData[i].url;
    // 设置标题
    title.innerHTML = sliderData[i].title;
    // 设置背景色
    footer.style.backgroundColor = sliderData[i].color;
    // 设置小圆点高亮
    // 移除现在有的active属性
    document.querySelector(".active").classList.remove("active");
    // 添加当前高亮
    lis[i].classList.add("active");
  }

  // 需求1:点击右侧按钮 顺序播放

  // 1.1 定义一个变量 作为索引计数
  let i = 0;
  // 1.2点击按钮的时候 索引自增
  // 绑定事件
  next.addEventListener("click", function () {
    // 索引自增
    i++;
    // 1.3处理索引越界问题
    i %= sliderData.length;
    // // 1.4设置信息
    // // 设置背景图
    // img.src = sliderData[i].url;
    // // 设置标题
    // title.innerHTML = sliderData[i].title;
    // // 设置背景色
    // footer.style.backgroundColor = sliderData[i].color;
    // // 设置小圆点高亮
    // // 移除现在有的active属性
    // document.querySelector(".active").classList.remove("active");
    // // 添加当前高亮
    // lis[i].classList.add("active");
    setInfo();
  });

  // 需求2：点击左侧按钮 倒序播放
  prev.addEventListener("click", function () {
    // 索引自增
    i--;

    // 2.3处理索引越界问题
    // i %= sliderData.length;
    if (i < 0) i = sliderData.length - 1;
    // // 2.4设置信息
    // // 设置背景图
    // img.src = sliderData[i].url;
    // // 设置标题
    // title.innerHTML = sliderData[i].title;
    // // 设置背景色
    // footer.style.backgroundColor = sliderData[i].color;
    // // 设置小圆点高亮
    // // 移除现在有的active属性
    // document.querySelector(".active").classList.remove("active");
    // // 添加当前高亮
    // lis[i].classList.add("active");
    setInfo();
  });

  //   3.自动轮播
  // 3.1开启定时器
  let timer = setInterval(function () {
    // 3.2每隔一秒出发移除有点急按钮事件
    // next.click()
    prev.click();
  }, 1000);

  // 4.鼠标经过轮播区域，就会停止。离开鼠标就会开始轮播
  // 4.1给整个div区域绑定鼠标经过事件

  slider.addEventListener("mouseenter", function () {
    console.log("鼠标经过"); //走一步侧异步，避免出现bug
    // 4.2经过后关闭定时器
    clearInterval(timer);
  });
  // 4.3给整个区域绑定鼠标离开事件，离开后继续轮播--开启轮播
  slider.addEventListener("mouseleave", function () {
    console.log("鼠标离开");
    // 4.4离开后开启定时器
    timer = setInterval(function () {
      next.click();
    }, 1000);
  });
</script>
